<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>
        </div>
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="咨询人姓名" label-width="90px">
              <el-input v-model="tableSearchParam.inquiryCustomerName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="咨询人手机" label-width="90px">
              <el-input v-model="tableSearchParam.inquiryCustomerTelphone" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="处理进度" label-width="70px">
              <el-select v-model="tableSearchParam.inquiryStatus" placeholder="请选择">
                <el-option key="" label="" value=""></el-option>
                <el-option key="0" label="待报价" value="0"></el-option>
                <el-option key="1" label="报价" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="咨询人姓名"
            property="inquiryCustomerName">
          </el-table-column>
          <el-table-column
            label="咨询人手机"
            property="inquiryCustomerTelphone">
          </el-table-column>
          <el-table-column
            label="行驶证图片"
            width="100">
            <template slot-scope="scope">
              <el-button @click="viewDriverLience(scope.row.customerDrivingLicenceUrl)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="报价"
            property="inquiryQuotation"
            width="100">
            <template slot-scope="scope">
              {{getTotal(scope.row.inquiryQuotation)}}
            </template>
          </el-table-column>
          <el-table-column
            label="处理进度"
            width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.inquiryStatus=='0'?'danger':'success'">
                {{scope.row.inquiryStatus == '0' ? '待报价' : '报价'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                type="success"
                @click="editData(scope.$index, scope.row)">报价
              </el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-close"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="行驶证" :visible.sync="dialogFormsVisible" top="10vh">
      <img :src="baseUrl+driverLience" width="200" height="200">
      <div slot="footer" class="dialog-footer">
      </div>
    </el-dialog>

  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
  }
</style>

<script>
  import carInsurranceInquiryApi from '@/api/carInsuranceInquiryApi'

  export default {
    created() {
      this.initData()
    },
    data() {
      return {
        baseUrl: process.env.IMG_BASE_URL,
        dialogFormsVisible: false,
        driverLience: '',
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          inquiryCustomerName: '',
          inquiryCustomerTelphone: '',
          inquiryStatus: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '110px',
        formData: {},
        loading: false,
        actionType: '',
        multipleSelection: [],
        rules: {
          name: [
            {required: true, message: '请输入平台名称', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      addData() {
      },
      viewDriverLience(driverLience) {
        this.driverLience = driverLience
        this.dialogFormsVisible = true
      },
      getTotal(itemQuotations) {
        if (itemQuotations == null) return ''
        let totelQuotation = 0
        for (var iq of itemQuotations) {
          for (var i of iq.items) {
            totelQuotation += i.value
          }
        }
        return totelQuotation
      },
      initData() {
        this.listTableData()
      },
      listTableData() {
        carInsurranceInquiryApi.list(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      },
      editData(index, row) {
        this.$router.push({path: '/insurance/car/inquiry/detail?id=' + row.id})
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          carInsurranceInquiryApi.deleteSingleCarInsuranceINquiry(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          carInsurranceInquiryApi.remove(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
